<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>2.2.1模板字符串</title>
    </head>
    <body>
        <script>
            //【例2.10】模板字符串表示普通字符串
            //传统方式, 使用+进行连接
            var message = "习近平新时代中国特色社会主义思想是当代"+
            "中国马克思主义，二十一世纪马克思主义。";
            //传统方式，使用JavaScript 的bug(反斜杠)
            var message2 ="习近平新时代中国特色社会主义思想是当代\
            中国马克思主义，二十一世纪马克思主义。";
            //es6方式(反引导+反斜杠)
            var message3 = `习近平新时代中国特色社会主义思想是当代\
            中国马克思主义，二十一世纪马克思主义。`;

            console.log(message);
            console.log(message2);
            console.log(message3);
            //浏览器在执行时将“\n”解析为回车换行,其余内容原样输出。
            
            //2.多行字符串
            //【例2.11】模板字符串表示多行字符串
            //传统方式用\n进行分段
            var message4 = "听党指挥"+"能打胜仗"+"作风优良";
            //es6方式
            let message5=`听党指挥
            能打胜仗
            作风优良`;
            console.log(message4);
            console.log(message5);
            //需要注意的是，如果使用模板字符串表示多行字符串，
            //所以的空格和缩进都会被保留在输出之中

            //3.字符串插入变量和表达式
            //【例2.12】模板字符串中插入变量和表达式
            let name = "Mike";
            let age = 20;
            let info = `My name is ${name},I am ${age} years ol next year.`
            console.log(info);
            //在模板字符串中插入变量和表达式，注意需要书写${}中，则输出是直接输出对应的值

            //【例2.13】模板字符串应用-采购小助手

            $("#submit").click(function(e){
                e.preventDefault();
                var today = new Date();
                var name = $("#name").val();
                var price = $("#price").val();
                var amount = $("#amount").val();
                var str = `<div class = "card">
                                <div class="card-body">
                                    <h5 class="card-title">
                                        ${today.getFullYear()}年${
                                            today.getMonth() + 1
                                        }月${today.getDate()}日
                                        </h5>
                            <p class="card-text">物资:${name},单价:${price}元,数量:${amount}</p>
                            <p class="card-text">共计:${price * amount}元</p>
                                        </div>
                                    </div>`;
                                $("#history-list").prepend($(str));
                                $("form")[0].reset();

            });
        </script>
    </body>
</html>
